<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许愿墙</title>
    <link rel=stylesheet href="./css/style.css">
</head>

<body>
<div class="top">
    <a href="#">许愿墙</a>
</div>
<div class="container note">
    <div class="note-top">
        <div class="note-top-add"></div>
    </div>

    <div class="note-box">
        <?php
            include_once 'select.php';
            # 是否为空
            # empty();
            # 是否有设置
        ?>


        <?php
            if (isset($wishData) && !empty($wishData)){

                # 遍历
        ?>
            <?php
            foreach ($wishData as $row){
            ?>
        <!-- 输出许愿墙 -->
        <div class="note-list note-list-<?php echo $row['color'];?>">
            <div class="note-list-action">
                <a class="note-list-edit" href="#" data-id="<?php echo $row['id'];?>" title="修改">✏️</a>
                <a class="note-list-delete" href="./delete.php?id=<?php echo $row['id'];?>" title="删除">❌</a>
            </div>
            <ul class="note-list-box">
                <li class="note-list-name">姓名: <span><?php echo $row['name'];?></span></li>
                <li class="note-list-content"><?php echo $row['content'];?></li>
                <li class="note-list-date"><?php echo $row['time'];?></li>
            </ul>
        </div>
            <?php
            }
            ?>
        <?php
            }
        ?>



    </div>
    <!-- 添加愿望表单 -->
    <div class="note-layer js-note-add" style="display:none">
        <div class="note-edit">
            <div class="note-edit-title">我要许愿</div>
            <form method="post" action="inser.php">
                <table class="note-edit-table">
                    <tr>
                        <td class="note-edit-table-w">
                            <p>我的名字：</p>
                            <input class="note-edit-name" type="text" name="name" placeholder="匿名">
                        </td>
                        <td>
                            <p>贴纸颜色：</p>
                            <label class="note-edit-green"><input type="radio" name="color" value="green"
                                                                  checked="checked"></label>
                            <label class="note-edit-blue"><input type="radio" name="color" value="blue"></label>
                            <label class="note-edit-yellow"><input type="radio" name="color" value="yellow"></label>
                            <label class="note-edit-red"><input type="radio" name="color" value="red"></label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p>我的愿望：</p>
                            <textarea class="note-edit-content" name="content"
                                      placeholder="80个字符以内（中文占2个字符位）"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <!--                        <td>-->
                        <!--                            保护密码：-->
                        <!--                            <input class="note-edit-pwd" type="password" name="password" placeholder="6个字符以内">-->
                        <!--                        </td>-->
                        <td>
                            <input class="note-edit-submit" type="submit" value="提交">
                            <input class="note-edit-cancel" type="button" value="取消">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <!-- 编辑愿望表单 -->
    <div class="note-layer js-note-edit" style="display:none">
        <div class="note-edit">
            <div class="note-edit-title">修改愿望</div>
            <form method="post" action="inser.php">
                <table class="note-edit-table">
                    <tr>
                        <td class="note-edit-table-w">
                            <p>我的名字：</p>
                            <input class="note-edit-name" type="text" name="name" placeholder="匿名">
                        </td>
                        <td>
                            <p>贴纸颜色：</p>
                            <label class="note-edit-green"><input type="radio" name="color" value="green"
                                                                  checked="checked"></label>
                            <label class="note-edit-blue"><input type="radio" name="color" value="blue"></label>
                            <label class="note-edit-yellow"><input type="radio" name="color" value="yellow"></label>
                            <label class="note-edit-red"><input type="radio" name="color" value="red"></label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p>我的愿望：</p>
                            <textarea class="note-edit-content" name="content"
                                      placeholder="80个字符以内（中文占2个字符位）"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <!--                        <td>-->
                        <!--                            保护密码：-->
                        <!--                            <input class="note-edit-pwd" type="password" name="password" placeholder="6个字符以内">-->
                        <!--                        </td>-->
                        <td>
                            <input class="note-edit-submit" type="submit" value="提交">
                            <input class="note-edit-cancel" type="button" value="取消">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <!-- 分页链接 -->
    <div class="note-page">
    </div>
</div>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/common1.js"></script>
</body>

</html>